<template>
    <div class="chat-window">
        <div class="top">
        </div>
        <div class="botoom">
            <div class="chat-content" ref="chatContent">
                <div class="chat-wrapper" >
                    <div class="chat-friend" >
                        <div class="chat-text" >
                            123

                        </div>


                    </div>
                    <div class="chat-friend" >
                        <div class="chat-text" >
                            123

                        </div>


                    </div>
                    <div class="chat-me">
                        <div class="chat-text" >
                            456

                        </div>
                    </div>
                </div>
            </div>
            <div class="chatInputs">

                <input class="inputs" @keyup.enter="sendText" />
                <div class="send boxinput" >
                    发送
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "chatwindow",
    created() {

    },
    methods:{
        sendText() {
            if (this.inputMsg) {
                this.inputMsg = "";
            } else {
                this.$message({
                    message: "消息不能为空哦~",
                    type: "warning",
                });
            }
        },
    }
}
</script>

<style lang="scss" scoped>
.chat-window {
    width: 95%;
    height: 100%;
    margin-left: 25px;
    position: relative;

    .top {
        margin-bottom: 10px;

        }
        }


    .botoom {
        width: 100%;
        height: 85vh;
        background-color: rgb(50, 54, 68);
        border-radius: 20px;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        .chat-content {
            width: 100%;
            height: 85%;
            overflow-y: scroll;
            padding: 20px;
            box-sizing: border-box;
            &::-webkit-scrollbar {
                width: 0; /* Safari,Chrome 隐藏滚动条 */
                height: 0; /* Safari,Chrome 隐藏滚动条 */

            }
            .chat-wrapper {
                .chat-friend {
                    width: 100%;
                    float: left;
                    margin-bottom: 20px;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-start;
                    .chat-text {
                        max-width: 90%;
                        padding: 20px;
                        border-radius: 20px 20px 20px 5px;
                        background-color: rgb(56, 60, 75);
                        color: #fff;
                        &:hover {
                            background-color: rgb(39, 42, 55);
                        }
                    }
                }
                .chat-me {
                    width: 100%;
                    float: right;
                    margin-bottom: 20px;
                    position: relative;
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-end;
                    align-items: flex-end;
                    .chat-text {
                        float: right;
                        max-width: 90%;
                        padding: 20px;
                        border-radius: 20px 20px 5px 20px;
                        background-color: rgb(29, 144, 245);
                        color: #fff;
                        &:hover {
                            background-color: rgb(26, 129, 219);
                        }
                    }
                    }

                }
            }
        }
        .chatInputs {
            width: 90%;
            position: absolute;
            bottom: 0;
            margin: 3%;
            display: flex;
            .boxinput {
                color: white;
                text-align: center;
                width: 50px;
                height: 30px;
                background-color: rgb(66, 70, 86);
                border-radius: 15px;
                border: 1px solid rgb(80, 85, 103);
                position: relative;
                cursor: pointer;
        }
    }
.inputs {
  width: 90%;
  height: 50px;
  background-color: rgb(66, 70, 86);
  border-radius: 15px;
  border: 2px solid rgb(34, 135, 225);
  padding: 10px;
  box-sizing: border-box;
  transition: 0.2s;
  font-size: 20px;
  color: #fff;
  font-weight: 100;
  margin: 0 20px;
  &:focus {
    outline: none;
  }
}
.send {
  color: white;
  text-align: center;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  position: relative;
  cursor: pointer;
  background-color: rgb(29, 144, 245);
  border: 0;
  transition: 0.3s;
  box-shadow: 0px 0px 5px 0px rgba(0, 136, 255);
  &:hover {
    box-shadow: 0px 0px 10px 0px rgba(0, 136, 255);
  }
}

</style>
